<template>
  <div class="incons">
    <swiper  :options="swiperOption">
      <swiper-slide v-for="(page,index) of pages" :key="index">
        <div class="icons" v-for="item of page" :key="item.id">
          <div class="img_icons">
            <img class="img_icons_content" :src="item.imgPath" alt="">
          </div>
          <p class="desc">{{item.desc}}</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
    export default {
        name: "IconsView",
      data (){
          return{
            swiperOption:{
              autoplay:false
            },
            iconsList:[
              {
                id:'001',
                imgPath:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
                desc:'景点门票'
              },{
                id:'002',
                imgPath:'http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png',
                desc:'文化古迹'
              },{
                id:'003',
                imgPath:'http://img1.qunarzz.com/piao/fusion/1803/e3/67df61427c8e1302.png',
                desc:'演出'
              },{
                id:'004',
                imgPath:'http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png',
                desc:'一日游'
              },{
                id:'005',
                imgPath:'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
                desc:'西安必游'
              },{
                id:'006',
                imgPath:'http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png',
                desc:'动植物园'
              },{
                id:'007',
                imgPath:'http://img1.qunarzz.com/piao/fusion/1808/8d/747c9a29b8dba402.png',
                desc:'白鹿原'
              },{
                id:'008',
                imgPath:'http://img1.qunarzz.com/piao/fusion/1803/fa/2548667cb6e902.png',
                desc:'逛博物馆'
              },{
                id:'009',
                imgPath:'http://img1.qunarzz.com/piao/fusion/1803/50/26ffa31b56646402.png',
                desc:'亲子游'
              }
            ]
          }
      },
      computed : {
        pages () {
          const pages =[]
          this.iconsList.forEach((item,index)=>{
              const page = Math.floor(index/8)
            if(!pages[page]){
              pages[page]=[]
            }
            pages[page].push(item)
          })
          return pages
        }
      }
    }
</script>

<style scoped lang="stylus">
  .incons
    width :100%
    height:0
    overflow :hidden
    padding-bottom :50%
    .icons
      display :inline-table
      width :25%
      height :25%
      float:left
      position :relative
      .img_icons
        padding :.2rem
        .img_icons_content
          width :80%
          border-radius :50%
          display block
          margin 0 auto
      .desc
          text-align: center
          color:#333
          font-size .22rem
</style>
